<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>公告发布</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/okadmin.css">
</head>

<body>

<div class="ok-body layui-form">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-md12">
            <hr class="layui-bg-gray">
            <fieldset class="layui-elem-field">
                <legend>公告类型</legend>
                <div class="layui-field-box">
                    <div class="layui-input-block">
                        <input type="radio" name="noticeType" lay-filter="noticeType" id="type0" value="0" title="普通公告"
                               checked>
                        <input type="radio" name="noticeType" lay-filter="noticeType" id="type1" value="1" title="轮播公告">
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-md12">
            <hr class="layui-bg-gray">
            <fieldset class="layui-elem-field">
                <legend>公告标题</legend>
                <div class="layui-field-box">
                    <input type="text" name="title" required lay-verify="required" id="title" placeholder="请输入公告标题"
                           autocomplete="off" class="layui-input">
                </div>
            </fieldset>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md12">
        <fieldset class="layui-elem-field">
            <legend>公告内容</legend>
            <div class="layui-field-box">
                    <textarea id="editor" style="display: none;">
              </textarea>
            </div>
        </fieldset>
    </div>
    <div class="layui-col-xs12 layui-col-md12" id="noticeImg" style="display: none;margin: 0 auto">
        <fieldset class="layui-elem-field">
            <div class="layui-field-box">
                <img src="" width="1525" height="400" id="carousel" style="margin-left: 17px;">
            </div>
            <div style="margin: 0 auto;margin-top: 20px;margin-bottom: 20px">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="imgSet" style="margin-left: 45%;">
                        选择文件
                    </button>
                    <button type="button" class="layui-btn" id="updateImg">开始上传</button>
                </div>
            </div>
        </fieldset>
    </div>
</div>
<br/>
</div>
<div class="layui-form-item" style="padding:0 0 0 20px;">
    <button type="button" id="reset" class="layui-btn layui-btn-lg">重置</button>
    <button type="button" id="submit" class="layui-btn layui-btn-normal layui-btn-lg">提交</button>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script type="text/javascript">
    layui.use(["layedit", "layer", 'form', 'upload'], function () {
        let noticeType = 0;
        let $ = layui.jquery;
        let layedit = layui.layedit;
        let form = layui.form;
        let upload = layui.upload
        var noticeId = "";
        layedit.set({
            uploadImage: {
                url: mainUri + '/notice/imageUpload'
            }
        });
        let index = layedit.build("editor");
        let layer = layui.layer; //独立版的layer无需执行这一句
        $("#reset").click(function () {
            layer.confirm("确定重置?", function (index) {
                location.reload();
            })
        });

        $("#submit").click(function () {
            var title = $('#title').val();
            var editText = layedit.getContent(index);
            if (title == '') {
                layer.msg('标题不能为空');
                return
            }
            if (editText.replace(/\s+/g, "") == '') {
                layer.msg('内容不能为空');
                return;
            }
            insert(editText);
        });

        function insert(editText) {
            //多窗口模式，层叠置顶
            layer.confirm("确定发布此公告?", function (index) {
                layer.close(index);
                showloading(true);
                var data = {
                    title: $('#title').val(),
                    content: editText,
                    noticeType: $('input[name="noticeType"]:checked').val()
                };
                $.ajax({
                    url: mainUri + '/notice/insert',
                    data: data,
                    type: "Post",
                    dataType: "json",//请求的数据类型
                    success: function (data) {
                        layer.msg(data.msg);
                        if (data.code == '0') {
                            noticeId = data['data']['noticeId']
                            addImg()
                        }
                    },
                    error: function () {
                        layer.msg('公告发布失败');
                        layer.close(index);
                    }
                });
                showloading(false);
            });
        };

        function addImg() {
            if (noticeType == 1) {
                layer.open({
                    type: 1,
                    title: "选择轮播照片",
                    content: $('#noticeImg'), //这里content是一个普通的String
                    area: ['1580px', '600px'],
                    resize: false,
                    maxmin: true,
                    moveOut: true,
                    cancel: function (index, layero) {
                        if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
                            layer.close(index)
                        }
                        return false;
                    }
                });
            } else {
                setTimeout(function () {
                    showloading(false);
                    location.reload();
                }, 1500);
            }
        }

        //选完文件后不自动上传
        var uploadInst = upload.render({
            elem: '#imgSet'
            , url: mainUri + '/notice/fileUpload' //改成您自己的上传接口
            , auto: false
            , accept: 'images'
            , acceptMime: 'image/*'
            , bindAction: '#updateImg'
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#carousel').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                layer.msg(res['msg']);
                setTimeout(function () {
                    layer.closeAll();
                    location.reload();
                }, 1500);
            }
            ,//上传前的回调
            before: function () {
                this.data = {
                    noticeId: noticeId
                }
            }
            , error: function () {
                if (confirm('上传失败,是否重试')) { //只有当点击confirm框的确定时，该层才会关闭
                    uploadInst.upload();
                }
            }
        });


        form.on("radio(noticeType)", function (data) {
            noticeType = data.value;
        });

    });

</script>
</body>

</html>